<template>
  <div class="content">
    <card type="plain">
      <template slot="header">
        <h4 class="card-title">当前登录地址</h4>
      </template>
      <div id="map" class="map">
        <baidu-map style="height: 100%; width: 100%;" ak="8VKBgEIGsUbLVVZkpOXGYsgKIrzzcZiS" :center="center"
                   :zoom="zoom"  @ready="handler">
        </baidu-map>
      </div>
    </card>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import {
  Card
} from "@/components/index";
import {getUserIp} from "@/api/user";

export default{
  data() {
    return{
      center: { lng: 0, lat: 0 },
      zoom: 3,
    }
  },
  components:{
    Card,
    BaiduMap
  },
  mounted() {
  },
  methods: {
    handler ({BMap, map}) {
      getUserIp().then((res) =>{
        if (res.data != null){
          this.center.lng = res.longitude
          this.center.lat = res.latitude
          this.zoom = 15
        }else {
          this.center.lng = 112.583804
          this.center.lat = 37.423954
          this.zoom = 15
        }
      })

    },
  }
}
</script>
<style>
</style>
